@unitSize: 4px;

// Fonts
@fontName:  -apple-system, system-ui, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Ubuntu",
            "Helvetica Neue", sans-serif;

@fontSize: @unitSize * 4;


// Colors
@lightenValue: 15%;
@darkenValue: 15%;

@transparent:			transparent;

@brandColor1: #2ac4f4;
@brandColor2: #004d6f;

@black:                 #000000;
@white:                 #ffffff;
@dark:                  #1d1d1d;
@light:                 #f8f8f8;
@gray:                  #bebebe;
@grayBlue:              #607d8b;
@grayWhite:             #f5f5f5;
@grayMouse:             #455a64;

@lime:                  #a4c400;
@green:                 #60a917;
@emerald:               #008a00;
@blue:                  #00AFF0;
@teal:                  #00aba9;
@cyan:                  #1ba1e2;
@cobalt:                #0050ef;
@indigo:                #6a00ff;
@violet:                #aa00ff;
@pink:                  #dc4fad;
@magenta:               #d80073;
@crimson:               #a20025;
@red:                   #CE352C;
@orange:                #fa6800;
@amber:                 #f0a30a;
@yellow:                #fff000;
@brown:                 #825a2c;
@olive:                 #6d8764;
@steel:                 #647687;
@mauve:                 #76608a;
@taupe:                 #87794e;

@lightLime:             lighten(@lime, @lightenValue);
@lightGreen:            lighten(@green, @lightenValue);
@lightEmerald:          lighten(@emerald, @lightenValue);
@lightBlue:             lighten(@blue, @lightenValue);
@lightTeal:             lighten(@teal, @lightenValue);
@lightCyan:             lighten(@cyan, @lightenValue);
@lightCobalt:           lighten(@cobalt, @lightenValue);
@lightIndigo:           lighten(@indigo, @lightenValue);
@lightViolet:           lighten(@violet, @lightenValue);
@lightPink:             lighten(@pink, @lightenValue);
@lightMagenta:          lighten(@magenta, @lightenValue);
@lightCrimson:          lighten(@crimson, @lightenValue);
@lightRed:              lighten(@red, @lightenValue);
@lightOrange:           lighten(@orange, @lightenValue);
@lightAmber:            lighten(@amber, @lightenValue);
@lightYellow:           lighten(@yellow, @lightenValue);
@lightBrown:            lighten(@brown, @lightenValue);
@lightOlive:            lighten(@olive, @lightenValue);
@lightSteel:            lighten(@steel, @lightenValue);
@lightMauve:            lighten(@mauve, @lightenValue);
@lightTaupe:            lighten(@taupe, @lightenValue);
@lightGray:             lighten(@gray, @lightenValue);
@lightGrayBlue:         lighten(@grayBlue, @lightenValue);


@darkLime:             darken(@lime, @darkenValue);
@darkGreen:            darken(@green, @darkenValue);
@darkEmerald:          darken(@emerald, @darkenValue);
@darkBlue:             darken(@blue, @darkenValue);
@darkTeal:             darken(@teal, @darkenValue);
@darkCyan:             darken(@cyan, @darkenValue);
@darkCobalt:           darken(@cobalt, @darkenValue);
@darkIndigo:           darken(@indigo, @darkenValue);
@darkViolet:           darken(@violet, @darkenValue);
@darkPink:             darken(@pink, @darkenValue);
@darkMagenta:          darken(@magenta, @darkenValue);
@darkCrimson:          darken(@crimson, @darkenValue);
@darkRed:              darken(@red, @darkenValue);
@darkOrange:           darken(@orange, @darkenValue);
@darkAmber:            darken(@amber, @darkenValue);
@darkYellow:           darken(@yellow, @darkenValue);
@darkBrown:            darken(@brown, @darkenValue);
@darkOlive:            darken(@olive, @darkenValue);
@darkSteel:            darken(@steel, @darkenValue);
@darkMauve:            darken(@mauve, @darkenValue);
@darkTaupe:            darken(@taupe, @darkenValue);
@darkGray:             darken(@gray, @darkenValue);
@darkGrayBlue:         darken(@grayBlue, @darkenValue);

@colorList: black, white, dark, light, grayBlue, grayWhite, grayMouse, brandColor1, brandColor2,
            lime, green, emerald, blue, teal, cyan, cobalt, indigo, violet, pink, magenta, crimson, red, orange, amber, yellow, brown, olive, steel, mauve, taupe, gray,
            lightLime, lightGreen, lightEmerald, lightBlue, lightTeal, lightCyan, lightCobalt, lightIndigo, lightViolet, lightPink, lightMagenta, lightCrimson, lightRed, lightOrange, lightAmber, lightYellow, lightBrown, lightOlive, lightSteel, lightMauve, lightTaupe, lightGray, lightGrayBlue,
            darkLime, darkGreen, darkEmerald, darkBlue, darkTeal, darkCyan, darkCobalt, darkIndigo, darkViolet, darkPink, darkMagenta, darkCrimson, darkRed, darkOrange, darkAmber, darkYellow, darkBrown, darkOlive, darkSteel, darkMauve, darkTaupe, darkGray, darkGrayBlue;

@colorListLength: length(@colorList);

// Body
@bodyColor: lighten(@black, 13%);

// Hover
@hoverBackground:  rgba(red(@dark), green(@dark), blue(@dark), .1);
@hoverBackground2:  rgba(red(@dark), green(@dark), blue(@dark), .5);
@hoverBackgroundLight3:  rgba(red(@white), green(@white), blue(@white), .3);
@hoverBackgroundLight2:  rgba(red(@white), green(@white), blue(@white), .2);
@hoverBackgroundLight1:  rgba(red(@white), green(@white), blue(@white), .1);
@hoverBackgroundLight:  rgba(red(@white), green(@white), blue(@white), .01);

// Appbar
@appBarBackground: @brandColor2;
@appBarBackgroundActive: lighten(@brandColor2, 10%);
@appBarColor: @white;

// Taskbar
@taskBarBackground: #053046;
@taskBarItemHover: rgba(red(@white), green(@white), blue(@white), .1);
@taskBarItemActive: rgba(red(@white), green(@white), blue(@white), .3);

// Form and Inputs
@inputBorder: #d9d9d9;
@checkBackground: darken(@inputBorder, 10%);

// Disabled
@disabledBackground: #e9e9e9;
@disabledBorder: #e9e9e9;
@disabledColor: lighten(@dark, 50%);

// Borders
@borderRadius: .25rem;
@borderColor: darken(@light, 10%);

// Links
@linkColor:             #0366d6;
@linkColorHover:        #0056b3;


// Accent colors
@primaryColor: #0366d6;
@secondaryColor: @grayBlue;
@successColor: @green;
@alertColor: @red;
@warningColor: @lightOrange;
@yellowColor: #ffe484;
@infoColor: @lightCyan;
@darkColor: lighten(@dark, 20%);
@lightColor: @light;
@brand1Color: @brandColor1;
@brand2Color: @brandColor2;

@accentColors: primary, secondary, success, alert, warning, yellow, info, dark, light;
@buttonPredefinedTypes: primary, secondary, success, alert, warning, yellow, info, dark, light, brand1, brand2;
@buttonPredefinedTypesLength: length(@buttonPredefinedTypes);

// Selected element
@selectedElementBorder: @lightCyan;

// Z-index
@zindex-selectedCheck:      100;
@zindex-absolute:           500;
@zindex-dropdown:           1000;
@zindex-sticky:             1020;
@zindex-fixed:              1030;
@zindex-modal-backdrop:     1040;
@zindex-modal:              1050;
@zindex-popover:            1060;
@zindex-tooltip:            1070;
@zindex-top:                1080;
@zindex-notify:             1085;
@zindex-charms:             1090;
@zindex-overlay:            2000;
@zindex-fullscreen:         2147483647;


// Percents breakpoints
@percentBreakpointsList: 25, 50, 75, 100;
@percentBreakpointsLength: length(@percentBreakpointsList);

// Tiles
@tileApp: 44px 44px;
@tileSmall: 70px 70px;
@tileMedium: 150px 150px;
@tileWide: 310px 150px;
@tileLarge: 310px 310px;
@tileMargin: 5px;
@tileCellSize: extract(@tileMedium, 1);
@tileOutlineColor:  rgba(red(@dark), green(@dark), blue(@dark), .1);
@tileTransformPerspective: 500px;
@tileTransformRotate: 0.138372rad;
@tileSize: extract(@tileMedium, 1);


// Media breakpoints
@fs: 0;
@xs: 360px;
@sm: 576px;
@ld: 640px;
@md: 768px;
@lg: 992px;
@xl: 1200px;
@xxl: 1452px;
@xxxl: 1600px;
@xxxxl: 1800px;
@xxxxxl: 2000px;

@mediaBreakpointListMobile: fs, sm, ld, md, lg, xl, xxl, xxxl, xxxxl, xxxxxl;
@mediaBreakpointListMobileLength: length(@mediaBreakpointListMobile);

@percents: 25, 33, 50, 75, 100;
@percentsLength: length(@percents);

// Transition
@transition-speed:       .3s;
@transition-short:       all .15s ease-in-out;
@transition-base:        all .3s ease-in-out;
@transition-long:        all 1s ease-in-out;
@transition-margin:      margin .3s ease-in-out;
@transition-fade:        opacity .15s linear;
@transition-color:       color .3s linear;
@transition-collapse:    max-height .3s ease;
@transition-width:       width .3s ease;
@transition-left:        left .3s ease;
@transition-right:       right .3s ease;
@transition-top:         top .3s ease;
@transition-bottom:      bottom .3s ease;
@transition-transform:   transform .3s ease;

// Grid
@gridColumns12: 12;
@gridGapSize: 12px;
@gridCellBaseSize: 8.333335%;

// Windows
@winBorderSize:                         .5rem;
@winBorderColor:                        #6badf6;
@winBorderColorInactive:                #ebebeb;
@winDialogContentBackground:            #ededed;
@winFlatBackgroundColor:                #ffffff;
@winFlatBorderColor:                    #e9e9e9;
@winFlatSystemButtonHoverBackground:    #cde6f7;
@winFlatSystemButtonActiveBackground:   #92c0e0;
@winFlatSystemButtonActiveColor:        #2a8dd4;
@winFlatSystemButtonRestColor:          #777777;
@winCloseButtonColor:                   #c75050;
@winCloseButtonActiveColor:             #e04343;
@winCloseButtonInActiveColor:           #bcbcbc;
@winCaptionBackground:                  #3c6478;
@winCaptionColor:                       @white;

@streamerItemWidth: 224px;
@streamerTimelineImage: "";

@activityRingTime: 4000ms;
@activityRingSize: 32px;
@activityColor: @white;
@activityColorDark: @darkGray;
@activityRingRotate: -14deg;
@activityRingTimeMute: 30;

@hintBackground: rgba(255, 252, 192, 1);
@hintColor: @dark;

@mpStep: 4;
@mpUnit: px;

@playerInactiveColor: #555555;
@playerActiveColor: @green;
@playerHoverColor: @white;
@playerControlsBackground: rgba(34, 34, 34, 0.5);

@ribbonMenuStaticBackground: #1979ca;
@ribbonMenuBackground: #ffffff;
@ribbonMenuActiveBackground: #f5f6f7;
@ribbonMenuBorder: #dadbdc;
@ribbonMenuItemBorder: #a4cef9;
@ribbonMenuItemActiveBorder: #1979ca;
@ribbonMenuItemHoverBackground: rgba(red(#a4cef9), green(#a4cef9), blue(#a4cef9), .2);
@ribbonMenuItemActiveBackground: rgba(red(#a4cef9), green(#a4cef9), blue(#a4cef9), .8);
@ribbonDropdownBackground: #fbfcfd;
@ribbonDropdownDivider: #dcddde;
@ribbonDropdownShadow: #e3e4e5;

@inputHeight: 36px;

@input-lx: 50px;
@input-sx: 28px;

@badgeFontSize: 12px;

@johnDoe: "";

// animation
@defaultPerspective: 600px;
@defaultAnimationSpeed: .3s;

// additional; colors
@ribbedSize: 20px;
@ribbedAlpha: .15;
@ribbedAngle: -45deg;
@alpha: .5;
